
<template>
  <!-- <div></div> -->

  <div class="common-layout">
    
    <el-container>
      <el-header
        ><span class="aaa"><img src="../logo.jpg" alt="" /></span>
        <div class="title">网络公司后台管理系统</div>
        <div class="people">欢迎来到综合管理平台</div>
      </el-header>
      <el-container>
        <el-aside>
          <el-row class="tac">
            <el-col :span="12">
              <!-- <h5 class="mb-2">首页</h5> -->
              <el-menu
                default-active="/index"
                class="el-menu-vertical-demo"
                @select="handleSelect"
              >
                <el-menu-item index="/index/home">
                  <!-- <el-icon><icon-menu /></el-icon> -->
                  <span>首页</span>
                </el-menu-item>
                <el-menu-item index="/index/projectManage">
                  <!-- <el-icon><icon-menu /></el-icon> -->
                  项目管理
                </el-menu-item>
                <el-menu-item index="/index/money">
                  <!-- <el-icon><icon-menu /></el-icon> -->
                  <span>费用管理</span>
                </el-menu-item>
                <el-menu-item index="/index/orderManage">
                  <!-- <el-icon><document /></el-icon> -->
                  <span>订餐管理</span>
                </el-menu-item>
                <el-menu-item index="/index/agreement">
                  <!-- <el-icon><setting /></el-icon> -->
                  <span>合同管理</span>
                </el-menu-item>
                <el-menu-item index="/index/goodPerson">
                  <!-- <el-icon><setting /></el-icon> -->
                  <span>人才管理</span>
                </el-menu-item>
              </el-menu>
            </el-col>
          </el-row>
        </el-aside>

        <el-main style="padding: 0; margin-left: -150px">
          <router-view></router-view
        ></el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script setup>
import { RouterLink, RouterView } from "vue-router";

import { useRouter } from "vue-router";
var router = useRouter();
//点击菜单项的回调, 通过参数path可以获取所点击的菜单项的index属性的值
var handleSelect = (path) => {
  router.push(path);
};
</script>

<style scoped >
el-header {
  background-color: blue;
}

.aaa > img {
  width: 60px;
  vertical-align: center;
  float: left;
  border-radius: 50%;
}
.title {
  margin-left: 170px;
  float: left;
  margin-top: 12px;
  font-size: 25px;
}
.people {
  float: right;
  margin-top: 18px;
  color: rgb(65, 65, 60);
}

</style>